<template>
    <el-container>
        <el-header class="searchPageHeader">
          <el-page-header @back="goBackAdmin" content="搜索页面-管理员">
</el-page-header>

        </el-header>

        <el-main>
           <el-tabs v-model="activeName" class="searchPageTabs">
              <el-tab-pane label="帖子" name="post">
                <div class="post-list">
                  <el-card v-for="post in posts" :key="post.id" @click.native="goToPost(post.id)" class="post-card">
                    <div class="post-title">{{ post.title }}</div>
                    <div class="post-info">
                      <span class="post-category">{{ post.category }}</span>
                      <span class="post-date">{{ post.date }}</span>
                    </div>
                    <div class="post-summary">{{ post.summary }}</div>
                    <el-button type="danger" @click.stop="deletePost(post.id)" style="margin-top: 10px;">删除</el-button>
                  </el-card>
                </div>
              </el-tab-pane>

                <el-tab-pane label="用户" name="user">
                  <div class="user-list">
                    <el-card v-for="user in users" :key="user.id" @click.native="goToUser(user.id)" class="user-card">
                      <div class="user-info">
                        <div class="user-avatar"><i class="el-icon-user"></i></div>
                        <div class="user-name">{{ user.name }}</div>
                      </div>
                      <div class="user-intro">{{ user.intro }}</div>
                    <el-button type="danger" @click.stop="deleteUser(user.id)" style="margin-top: 10px;">删除</el-button>
                    </el-card>
                  </div>
                </el-tab-pane>
            </el-tabs>
        </el-main>

    </el-container>
</template>

<script>
  export default {
    data() {
      return {
        searchValue: "",
        activeName: 'post',
         users: [
      {
        id: 1,
        name: '张三',
        intro: '这是张三的介绍'
      },
      {
        id: 2,
        name: '李四',
        intro: '这是李四的介绍'
      },
      // 其他用户数据
    ],
        posts: [
        {
          id: 1,
          title: '文章1标题',
          category: '文章分类1',
          date: '2023-04-18',
          summary: '这是文章1的摘要',
          content: '这是文章1的内容',
        },
        {
          id: 2,
          title: '文章2标题',
          category: '文章分类2',
          date: '2023-04-17',
          summary: '这是文章2的摘要',
          content: '这是文章2的内容',
        },
        // 其他文章数据
      ],
      };
    },
    methods: {
      deleteUser(userId) {
    this.$confirm('此操作将永久删除该用户，是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 找到要删除的用户在数组中的索引
      const index = this.users.findIndex(user => user.id === userId);
      if (index !== -1) {
        // 从数组中删除对应的用户
        this.users.splice(index, 1);
        // 通知父组件，数据已更新
        this.$emit('update:users', this.users);
        // 显示删除成功的消息
        this.$message({
          type: 'success',
          message: '删除成功！'
        });
      }
    }).catch(() => {
      // 取消删除，不执行任何操作
    });
  },
       deletePost(postId) {
      this.$confirm('此操作将永久删除该帖子, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 找到要删除的帖子在数组中的索引
        const index = this.posts.findIndex(post => post.id === postId);
        if (index !== -1) {
          // 从数组中删除对应的帖子
          this.posts.splice(index, 1);
          // 通知父组件，数据已更新
          this.$emit('update:posts', this.posts);
          // 显示删除成功的消息
          this.$message({
            type: 'success',
            message: '删除成功！'
          });
        }
      }).catch(() => {
        // 取消删除，不执行任何操作
      });
    },
      created() {
        this.activeName = 'post';
      },
      goBackAdmin () {
        this.$router.push("/adminMain")
      },
      goToPostPage() {
        this.$router.push("/postPage")
      },
      goToUserInformation(){
       this.$router.push("/userInformation")     
      },
      goToSearchPage() {
        if (this.searchValue.trim() === '') {
          // 如果搜索框为空则不跳转到搜索页面
          return;
        }
        this.$router.push('/searchPage')
        // 根据 this.searchValue 进行搜索
      },
      
    }
  };
</script>

<style>
.searchPageHeader {
  padding: 16px;
}

.el-main {
  padding: 16px;
}
.header-right {
  display: flex;
  align-items: center;
  margin: auto;
}

.header-left {
  display: flex;
  align-items: center;

}

.dropdown {
  margin-right: 20px;
}
.selectBtn {
  width: 100px;
}
.input {
  width: 350px;
  margin-right: 10px;
}

.post-card {
  width: 80%;
  margin-bottom: 16px;
  cursor: pointer;
}

.post-title {
  font-size: 24px;
  margin-bottom: 8px;
}

.post-info {
  font-size: 14px;
  color: #888;
  margin-bottom: 8px;
}

.post-category {
  margin-right: 8px;
}

.post-summary {
  font-size: 16px;
  line-height: 1.5;
}

.user-list {
  display: flex;
  flex-wrap: wrap;
}

.user-card {
  width: 200px;
  margin: 16px;
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.user-avatar {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 8px;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-name {
  font-size: 18px;
}

.user-intro {
  font-size: 14px;
  color: #888;
  line-height: 1.5;
}

</style>